<template>
  <Dialog :appDialog="appDialog">
    <div class="content" v-html="content"></div>
  </Dialog>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, reactive, computed, watch } from 'vue'
import Dialog from '@/components/Dialog.vue'

const emit = defineEmits(['submit', 'cancel'])
const content = ref('删除分组后，所属标签将被移除到默认分组')
// 取消
const cancelHandel = () => {
  emit('cancel')
  appDialog.visible = false
}
//确定删除
const submitHandel = async () => {
  emit('submit')
  cancelHandel()
}
const appDialog = reactive({
  visible: false,
  title: '删除提醒',
  width: '400px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '确定'
})
defineExpose({
  appDialog,
  content
})
</script>
<style lang="scss" scoped>
.content {
  min-height: 100px;
  line-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
